<template lang="pug">
div.segment-wrap(:class="[size]")
  div.segment-item(v-for="(item, index) in list"
    :class="{'active': index === currentIndex}"
    :key="index"
    @mouseover="handleHover"
    @mouseout="handleHover"
    @click="handleChange(item, index)") {{ item.label }}
</template>

<script>
export default {
  name: "FilterSegment",
  props: {
    list: Array,
    size: {
      type: String,
      default: '',
    },
    currentIndex: {
      type: Number,
      default: 0,
    }
  },
  methods: {
    handleHover(e) {
      this.$emit('onHover');
    },
    handleChange(item, index) {
      this.$emit('update:currentIndex', index);
      this.$emit('onChange', item);
    }
  }
}
</script>

<style lang="scss" scoped>
.segment-wrap{
  display: flex;
  border: 1px #05FDBB solid;
  box-sizing: border-box;
  align-items: center;
  height: 100%;
  &.large{
    @include fontSie(18);
  }
  .segment-item{
    @include fontSie(16);
    color: #698B95;
    padding: 0 rem(8);
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
    &.active{
      background-color: #05FDBB;
      color: #000000;
    }
  }
}
</style>
